<template>
    <div>
        <el-card>
            <el-page-header content="新闻列表" icon="" title="新闻管理" />
            <el-table :data="tableData" style="width: 100%;height: 100%;">

                <el-table-column prop="title" label="标题" width="180" />
                <el-table-column prop="category" label="分类">
                    <template #default="scope">
                        {{ categoryFormat(scope.row.category) }}
                    </template>
                </el-table-column>

                <el-table-column prop="editTime" label="更新时间">
                    <template #default="scope">
                        {{ formatTime.getTime(scope.row.editTime) }}
                    </template>
                </el-table-column>

                <el-table-column prop="isPublish" label="是否发布">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isPublish" :active-value="1" :inactive-value="0"
                            @change="handleSwitchChange(scope.row)" />
                    </template>
                </el-table-column>

                <el-table-column prop="" label="操作">
                    <template #default="scope">
                        <el-button circle :icon="Star" size="small" @click="handlePreview(scope.row)"
                            type="success"></el-button>
                        <el-button circle :icon="Edit" size="small" @click="handleEdit(scope.row)"></el-button>
                        <el-popconfirm title="你确定要删除么?" confirm-button-text="是" cancel-button-text="否"
                            @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button circle size="small" :icon="Delete" type="danger"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog v-model="dialogFormVisible" title="预览新闻" width="50%">
            <div>
                <h2>{{ previewData.title }}</h2>
                <div style="font-size: 12px;color: gray;"> {{ formatTime.getTime(previewData.editTime) }}</div>
                <el-divider>
                    <el-icon><star-filled /></el-icon>
                </el-divider>
                <div v-html="previewData.content" class="htmlContent">

                </div>
            </div>
        </el-dialog>
    </div>
</template>


<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import formatTime from '@/util/formatTime'
import { Star, Edit, Delete, StarFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter()
const tableData = ref([])
const previewData = ref({})
const dialogFormVisible = ref(false)

onMounted(() => {
    getTableData()
})

const getTableData = async () => {
    const res = await axios.get('/adminapi/news/list')
    console.log(res.data.data)
    tableData.value = res.data.data
}

const categoryFormat = (category) => {
    const arr = ['最新动态', '典型案例', '通知公告']
    return arr[category - 1]
}

const handleSwitchChange = async (item) => {
    console.log(item)
    await axios.put('/adminapi/news/publish', {
        _id: item._id,
        isPublish: item.isPublish
    })
}

const handlePreview = async (item) => {
    console.log(item)
    previewData.value = item
    dialogFormVisible.value = true
}

const handleEdit = async (item) => {
    // console.log(item)
    // 跳转到/news-manage/editnews/:id

    router.push(`/news-manage/editnews/${item._id}`)
}

const handleDelete = async (item) => {
    console.log(item)
    const res = await axios.delete(`/adminapi/news/list/${item._id}`)
    console.log(res)
    if (res.data.ActionType == 'ok') {
        ElMessage.success('删除成功')
    }

    await getTableData()
}

</script>

<style lang="scss" scoped>
.el-table {
    margin-top: 50px;
}

::v-deep .htmlContent {
    img {
        max-width: 100%;
    }
}
</style>